<template>
  <view>
    <view class="card">
      <view class="card-item" v-for="item in cardInfo" :key="item.id" @click="clickFn(item)">
        <uni-icons :type="item.icons" size="26"></uni-icons>
        <view class="card-item-text">{{item.title}}</view>
        <uni-icons type="forward" size="30"></uni-icons>
      </view>

    </view>
    
  </view>
</template>

<script>
  export default {
    name:"my-card-catalog",
    props:{
      cardInfo:{
        type: Array,
        default: []
      }
    },
    data() {
      return {
        
      };
    },
	methods:{
		clickFn(item){
			this.$emit('click',item)
		}
	}
  }
</script>

<style lang="scss">
.card{
  height: 230rpx;
  background-color: #fff;
  padding: 0 35rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  .card-item{
    display: flex;
    justify-content: space-between;
    align-items:center;
    border-bottom: 1rpx solid #ccc;
    padding-bottom: 26rpx;
    margin-top: 26rpx;
    .card-item-text{
      text-indent: 1em;
      font-size: 26rpx;
      flex: 1;
    }
    &:last-child{
      border-bottom: none;
    }
  }
}
</style>